import React from 'react';
import { PROJECT_ADMIN_ROLES } from 'utils/constants.js';
import docs from 'utils/docs';
import { navigateOpen } from 'utils/router';
import { access } from 'components/accessContainer/util';
import { Balloon, Tag } from '@teamix/ui';
import './lfsTag.scss';
import track from 'utils/track';
import intl from '../../locale';

export default class LfsTag extends React.Component {
  goSetting = () => {
    const { pathResource } = window.FORCE;
    navigateOpen(`/${pathResource.fullPath}/settings/lfs`, '_blank');
    track({
      action: 'view_lfs_file',
      page: '',
      type: '',
      control: 'tag',
    });
  };

  render() {
    const { role } = this.props;
    return (
      <Balloon
        align="t"
        closable={false}
        trigger={
          <span className="lfs-tag">
            <Tag type="primary">Git LFS</Tag>
          </span>
        }
      >
        {intl.get({
          id: 'code-assets.components.lfs.lfsTag.FilesAreStoredThroughGit',
          defaultMessage: '文件通过 Git LFS（Large File Storage）存储，',
        })}

        {access(PROJECT_ADMIN_ROLES, role) ? (
          <a className="no-href-with-click" onClick={this.goSetting}>
            {intl.get({
              id: 'code-assets.components.lfs.lfsTag.ViewAllGitLfsFiles',
              defaultMessage: '查看当前库全部 Git LFS 文件',
            })}
          </a>
        ) : (
          <a
            href={docs('lfs')}
            target="_blank"
            onClick={() => {
              track({
                action: 'view_lfs_instruction',
                page: '',
                type: '',
                control: 'tag',
              });
            }}
            rel="noreferrer"
          >
            {intl.get({
              id: 'code-assets.components.lfs.lfsTag.LearnAboutBigFileStorage',
              defaultMessage: '了解大文件存储服务',
            })}
          </a>
        )}
      </Balloon>
    );
  }
}
